<template>
  <div class="app-container" v-loading="pageLoading">
    <el-row :gutter="10">
      <el-col :span="12">
        <div class="panel-info">
          <div class="panel-title">岗位类型</div>
          <div class="panel-body">
            <el-button v-if="basicInfoShow" type="primary" class="fr" @click="createItem" v-permission="'material.add'">
              创建
            </el-button>
            <div v-if="basicInfoShow" class="filter-container">
              <el-input style="width: 260px;" placeholder="输入岗位名称" clearable class="filter-item"
                @keyup.enter.native="research" @clear="research" v-model="query.positions_code">
              </el-input>
              <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
              <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading">导出
              </el-button>

            </div>
            <z-table :list="list" :tableProps="tableProps" @row-click="rowClick" :columns="columns" @editItem="editItem"
              @deleteItem="deleteItem">
              <template v-slot:content="v">
                <span v-if="v.key == 'positions_type'">
                  {{getMatchingData(v.row[v.key],'positions_type')}}
                </span>
                <span v-else>{{ v.row[v.key] }}</span>
              </template>
            </z-table>
            <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
              @change="getList"></z-pagination>
            <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
              :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="panel-info">
          <div class="panel-title">人员列表</div>
          <div class="panel-body" v-if="userTableShow">
            <el-button class="fr" size="mini" type="primary" icon="el-icon-plus" circle plain @click="addUserClick">
            </el-button>
            <div class="filter-container">
              <!-- <el-input class="filter-item" style="display:inline-block;width: 160px;" placeholder="输入条件搜索"
                prefix-icon="el-icon-search" size="mini" clearable v-model="userQuery.s" @change="researchUser">
              </el-input> -->
            </div>
            <z-table :list="userlist" :tableProps="tableProps" :columns="userColumns" @editItem="editItem"
              @deleteItem="deleteItem">
              <template v-slot:operation="v">
                <a href="javascript:;" class="text-red" @click.stop="userDelete(v.row)">删除</a>
              </template>
            </z-table>
            <z-pagination v-if="userTableShow" :pagination="pagination" :total="userTotal" :page.sync="userQuery.page"
              :limit.sync="userQuery.size" @change="getList"></z-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
    <use-select v-if="selectVisible" ref="useselect" @closed="selectVisible=false" @change="useSelectChange">
    </use-select>
  </div>

</template>

<script>
import commonMixin from '@/views/_common/mixin'
import useSelect from '@/components/Select'
export default {
  name: 'positionInfo',
  mixins: [commonMixin],
  components: { useSelect },
  props: {
    basicInfoShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      query: {
        page: 1,
        size: 10,
      },
      name: '岗位信息',
      api: this.$api.TpmEquipmentPost,
      baseUrl: this.$api.baseUrl,
      postForList: true,
      tableProps: {
        border: true,
        opsColWith: 100,
        fixed: false,
        highlightCurrentRow: true,
        hideOperations: false,
      },
      positionOptions: [],
      columns: [
        { title: '岗位类型', key: 'positions_type' },

        { title: '岗位名称', key: 'positions_name' },
        { title: '备注', key: 'remarks' },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改时间', key: 'modify_time', width: 100 },
      ],
      fields: [
        { title: '岗位类型', key: 'positions_type', span: 12, name: 'select', options: [], required: true },
        {
          title: '岗位名称',
          key: 'positions_name',
          span: 12,
          required: true,
        },
        {
          title: '备注',
          key: 'remarks',
          span: 24,
          name: 'textarea',
        },
      ],
      positionsId: '',
      // 人员列表
      userQuery: {
        page: 1,
        size: 10,
      },
      userColumns: [
        { title: '账号', key: 'user' },
        { title: '姓名', key: 'username' },
        { title: '部门', key: 'dept_name' },
      ],
      userTableShow: false,
      userlist: [],
      userTotal: 0,

      // 管理用户组件
      addUserShow: false,
      selectVisible: false,
      value: [],
    }
  },
  computed: {},
  watch: {
    basicInfoShow: {
      immediate: true,
      handler(val, old) {
        if (!val) {
          this.tableProps = {
            border: true,
            opsColWith: 160,
            fixed: false,
            highlightCurrentRow: true,
            hideOperations: true,
          }
        }
      },
    },
  },
  created() {
    this.getpositions()
    this.research()
  },
  mounted() {},
  methods: {
    // 获取岗位类型
    getpositions() {
      this.$request(this.$api.dictionary + 'getdirectchildren', {
        parentType: 'positions_type',
      }).then((r) => {
        this.positionOptions = r.map((i) => ({
          label: i.label,
          value: i.value,
        }))
        this.getFieldConfig('positions_type').options = this.positionOptions
      })
    },
    // 获取匹配数据
    getMatchingData(val, code) {
      if (code == 'positions_type') {
        let tmp = this.positionOptions.find((i) => i.value == val)
        return tmp ? tmp.label : ''
      }
    },
    //  点检类型获取人员
    rowClick(v) {
      this.positionsId = v.id
      this.userTableShow = true
      this.getUserList()
    },
    submit() {
      this.submitLoading = true
      this.$request(this.api + 'add', this.data, 'post')
        .then((r) => {
          this.$message.success('操作成功')
          this.editFormVisible = false
          this.getList()
        })
        .finally(() => {
          this.submitLoading = false
        })
    },
    getUserList() {
      let data = {
        page: this.userQuery.page,
        size: this.userQuery.size,
        positions_id: this.positionsId,
      }
      this.$request(this.api + 'GetTpmPostEmpList', data, 'post').then((r) => {
        const { total, list } = r
        this.userTotal = total
        this.userlist = list
      })
    },
    userDelete(v) {
      this.$confirm('确定要删除这条记录？').then(() => {
        this.pageLoading = true
        this.$request(this.api + 'DeleteTpmPostEmp' + '/' + v.id, {}, 'post')
          .then((r) => {
            this.$message.success('操作成功')
            this.getUserList()
          })
          .finally(() => {
            this.pageLoading = false
          })
      })
    },
    // 人员的筛选
    researchUser() {},
    // 添加人员
    addUserClick() {
      this.selectVisible = true
      this.$nextTick(() => {
        this.$refs.useselect.open(1, [])
      })
    },
    useSelectChange(data) {
      let users = []
      data.forEach((x) => {
        users.push(x.id)
      })
      let Data = {
        positions_id: this.positionsId,
        users,
      }
      this.$request(this.api + 'SaveTpmPostEmp', Data, 'post').then((r) => {
        this.$message.success('添加成功')
        this.getUserList()
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>